<html>

	<head>
		<style>
			*{
				margin:0;
				padding:0;
			}
		
			div{
				width:200px;
				height:200px;
				padding:10px;
				border:1px solid #ccc;
				margin:20px;
			}
		
		</style>
	</head>
	
	<body>
		
		<div></div>
	
	</body>
	
	<script>
	
	var  div = document.querySelector("div")
	// 获取el的 width + padding + border
		//el.offsetWidth
	// 获取el的 height + padding + border
		//el.offsetHeight
		
	//获取el的 height + padding 
	
	//el.clientWidth
	//获取el的 width + padding
		//el.clientHeight
	
	</script>

</html>